<script type="text/javascript">
$(document).ready(function(){


	$('.quiz input').click(function(){
		var clickedID = $(this).attr('id');
		if($(this).attr('checked')){
		 $('.checklist li.'+clickedID).animate({'opacity':1}, {duration: 400, easing:'swing'});
		} else {
			$('.checklist li.'+clickedID).animate({'opacity':0.3}, {duration: 400, easing:'swing'});
		}
		//$('.checklist li.'+clickedID).slideToggle();
		//alert($('input:checked').length);

		if ($('input[type=checkbox]').not(':checked').length <= 2) {
			$('.checklist .checkmark, .excellent').animate({'opacity':1}, {duration: 400, easing:'swing'});
		} else {
			$('.checklist .checkmark, .excellent').animate({'opacity':0.3}, {duration: 400, easing:'swing'});
		}

	});
});
</script>

<section class="cf" id="intro">

	<div class="page one hasHeader">

        <div class="onecol">

            <h1>Know Your Apps</h1>
			<h2 class="main-caption">Evolution of Web Apps</h2>
			<p>Not long ago, the web was for ‘surfing’; its main purpose was to provide information. To perform set tasks, users bought and installed software onto their desktop. Key to knowing your web apps is understanding how technologies have shaped the evolution of web apps; web apps are now offering as much, if not more than the desktop application.</p>
			<p class="callout righty w33">HTML5 has enabled developers to break free of the limits they were used to when building web applications</p>
			<h3>Asynchronous web apps have transformed user interaction</h3>
			<p>Things have fundamentally changed since the early days of the web, when web page content was static.  Today, page’s load or change dynamically, rather than performing an entire round-trip of all content.</p>
			<h3>New language standards provide richer user experience</h3>
			<p>Prior to HTML5 support in modern browsers, the features needed to build web applications was inconsistent, and often required the use of plug-ins like Flash, ActiveX or Java.  New open web platform standards like CSS3, HTML5, and JavaScript ensure that developers have the tools and features they need to build more beautiful and interactive web apps than ever before.</p>

		</div>

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_tech_components.jpg" alt="Figure 1.1 - New technology broadens our capabilities!" title="Figure 1.1 - New technology broadens our capabilities!" class="">
				<p class="caption">Figure 1.1 - New technology broadens our capabilities!</p>
            </div>

		</div><!-- end onecol -->

	</div><!-- end page two -->

</section>

<section class="cf" id="the-future">

	<div class="page one">

		<div class="onecol">

			<h2 class="main-caption">The Future of Web Apps</h2>
			<p>Critics of the web app are quick to point out one of the main drawbacks -  web application users must have an internet connection to get stuff done. Given that the web is not accessible all the time and everywhere, users cannot be fully reliant on web applications to do their work. Or at least, that has been the assumption.</p>
			<p class="callout righty w33">It is up to you to make sure your web apps use the technologies available.</p>
			<p>The future of web apps is about flexibility - having all the benefits of performing tasks over the web, while also being able to perform those tasks offline. Offline support is already possible - HTML5 offers features like application cache and client-side storage (e.g., local storage, indexed databases) so that your application can run even without a network connection.</p>
			<h3>The cloud offers users more than a desktop</h3>
			<p>The cloud provides a platform on which server side functionality can be hosted and shared. Using web apps hosted in the cloud, users can collaborate with others and themselves across multiple devices, saving data in secured servers. Without heavy overhead costs, web apps can be distributed at a fraction of the cost of desktop applications.</p>


	      </div><!-- end onecol -->

	  </div><!-- end page 1 -->

	  <div class="page two">

			<div class="onecol">

			<div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_capabilities.jpg" alt="Figure 1.2 - Use your device to its fullest potential!" title="Figure 1.2 - Use your device to its fullest potential!">
           		<p class="caption">Figure 1.2 - Use your device to its fullest potential!</p>
			</div>

			</div><!-- end onecol -->

	</div><!-- end page two -->

</section>

<section class="cf" id="site-vs-app">

	<div class="page one">

		<div class="onecol">

			<h2 class="main-caption">Properties of Web Apps</h2>
			<p>Web applications are redefining what it means to be ‘on the web’; the web is becoming an equal mix of web sites and web applications. Here are three main factors that distinguish web apps from web sites:</p>
			<p class="callout lefty w33">Web Applications can be as complex as spreadsheets, document editors or as simple as to-do list manager. Whatever it is, it should do something!</p>
			<ol class="book-ol">
		      	<li><span class="big-bullets">1.</span><strong><a class="internal" href="/webappfieldguide/designing-web-applications/interact/">A web application provides a great user experience</a></strong>, making it easy for users to complete their tasks and takes advantage of the device’s native capabilities.</li>
		      	<li><span class="big-bullets">2.</span><strong><a class="internal" href="/webappfieldguide/building-great-web-applications/beautiful/">A web application provides rich visual experiences</a></strong> that will delight the eye without distracting the mind; it puts a premium on aesthetics and uses similar design paradigms as native applications without sacrificing usability.</li>
		      	<li><span class="big-bullets">3.</span><strong><a class="internal" href="/webappfieldguide/designing-web-applications/fundamentals1/">A web application has a tight focus</a></strong> encouraging people to interact, engage, and accomplish something, rather than passively view content. The application is self-contained, allowing the user to complete their tasks without navigating to other sites or apps.</li>
		    </ol>

        </div><!-- end onecol -->

	</div><!-- end page 1 -->

	<div class="page two">

		<div class="onecol">

			<div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_app_does.jpg" alt="Figure 1.3 - Small, big, simple, complex? Just do something!" title="Figure 1.3 - Small, big, simple, complex? Just do something!" class="">
				<p class="caption">Figure 1.3 - Small, big, simple, complex? Just do something!</p>
			</div>

		</div><!-- end onecol -->

	</div><!-- end page two -->

</section>

<section class="cf" id="app-checklist">

	<div class="page one">

		<div class="onecol">

			<h2 class="main-caption">Checklist for Identifying Web Apps</h2>
			<!--<p>A handy checklist for identifying web apps (lots more to come on designing and building your own web apps that meet this criteria):</p>-->
			<div>
				<fieldset>
					<ul class="book-ul">
						<li class="quiz"><input id="Q1" name="Q1" type="checkbox" class="field checkbox" value="Self Contained" tabindex="1" /><label for="Q1">Is it <strong><a class="internal" href="/webappfieldguide/designing-web-applications/fundamentals2/">mostly self-contained</a></strong>, without redirecting me to a completely different experience to complete what I set out to do?</label></li>
						<li class="quiz"><input id="Q2" name="Q2" type="checkbox" class="field checkbox" value="Accomplish" tabindex="1" /><label for="Q2">Can I <strong><a class="internal" href="/webappfieldguide/designing-web-applications/interact/">interact, engage and accomplish</a></strong> something by using the application?</label></li>
						<li class="quiz"><input id="Q3" name="Q4" type="checkbox" class="field checkbox" value="Rich Interface" tabindex="1" /><label for="Q3">Does it have a <strong><a class="internal" href="/webappfieldguide/building-great-web-applications/beautiful/">rich user interface</a></strong> that looks nice, and takes advantage of the full size of the window available to it?</label></li>
					</ul>
					<p class="callout righty w33">If you answered yes to most of these questions, then what you're looking at is most likely a web application.</p>
					<ul class="book-ul">
						<li class="quiz"><input id="Q4" name="Q4" type="checkbox" class="field checkbox" value="Native Apps" tabindex="1" /><label for="Q4">Does it use the <strong><a class="internal" href="/webappfieldguide/building-great-web-applications/file-handling/">same paradigms as native applications</a></strong> for buttons, dialogs and other components?</label></li>
						<li class="quiz"><input id="Q5" name="Q5" type="checkbox" class="field checkbox" value="Offline" tabindex="1" /><label for="Q5">Does it <strong><a class="internal" href="/webappfieldguide/building-great-web-applications/offline/">work offline</a></strong>?</label></li>
						<li class="quiz"><input id="Q6" name="Q6" type="checkbox" class="field checkbox" value="Device Aware" tabindex="1" /><label for="Q6">Is it using the <strong><a class="internal" href="/webappfieldguide/designing-web-applications/interact/">capabilities of the device</a></strong> it’s running on, for example location data through the GPS and motion sensors?</label></li>
						<li class="quiz"><input id="Q7" name="Q7" type="checkbox" class="field checkbox" value="New Navigation" tabindex="1" /><label for="Q7">Are traditional website navigation elements and links <strong><a class="internal" href="/webappfieldguide/building-great-web-applications/whole-screen/">hidden from view</a></strong>?</label></li>
						<li class="quiz"><input id="Q8" name="Q8" type="checkbox" class="field checkbox" value="Ajaxcellent" tabindex="1" /><label for="Q8">Is the app designed around a primarily <strong><a class="internal" href="/webappfieldguide/designing-web-applications/design-patterns/">client-side architecture</a></strong> model?</label></li>
					</ul>
               	</fieldset>
			</div>

		</div><!-- end onecol -->

	</div><!-- end page 1 -->

	<div class="page two">

    	<div class="onecol">

			<div class="image_block centery w80 checklist cf">

				<ul>
					<li class="Q1">Self Contained!</li>
					<li class="Q2">Functional!</li>
					<li class="Q3">Immersive!</li>
					<li class="Q4">Interactive!</li>
					<li class="Q5">Work Offline!</li>
					<li class="Q6">Device Aware!</li>
					<li class="Q7">New Navigable!</li>
					<li class="Q8">Ajaxcellent!</li>
					<li class="excellent">Excellent!</li>
				</ul>

				<div class="checkmark"></div>

	  			<img class="center" src="/webappfieldguide/img/Appward_Illustrations_checklist.jpg" alt="Figure 1.4 - Checked them all? Excellent!" title="Figure 1.4 - Checked them all? Excellent!" class="center">
				<p class="caption">Figure 1.4 - Checked them all? Excellent!</p>
	  		</div>

		</div><!-- end onecol -->

	</div><!-- end page two -->

</section>
